import React, { useEffect, useState } from 'react';
import { Breadcrumb, DatePicker } from 'antd'
// 引入 ECharts 主模块
import * as echarts from 'echarts'
import axios from 'axios';


const ZhuYuanBuShouRu = () => {


    function getDataMonthlyStatistics(){
        let xiyaofei=0
        let zhongyaofei=0
        let jianchafei=0
        let zhiliaofei=0
        let fangshefei=0
        let shoushufei=0
        let huayanfei=0
        let shuxuefei=0
        let shuyangfei=0
        let chuangweifei=0
        let jieshengfei=0
        let qita=0

        axios("/zhuYuanBuZiJinRiTongJi/chaXunAll")
        .then(res=>{
            
            res.data.data.map((item,index,arr)=>{
                item.shouFeiLeiXingMingCheng=item.shouFeiLeiXing.shouFeiLeiXingMingCheng
                console.log(item.heJi)
                if(item.shouFeiLeiXingMingCheng=="西药费"){
                    xiyaofei+=item.heJi
                }else if(item.shouFeiLeiXingMingCheng=="中药费"){
                    
                    zhongyaofei+=item.heJi
                }else if(item.shouFeiLeiXingMingCheng=="检查费"){
                    jianchafei+=item.heJi
                }else if(item.shouFeiLeiXingMingCheng=="治疗费"){
                    // console.log(zhiliaofei,item.heiJi)
                    zhiliaofei+=item.heJi
                }else if(item.shouFeiLeiXingMingCheng=="放射费"){
                    fangshefei+=item.heJi
                }else if(item.shouFeiLeiXingMingCheng=="手术费"){
                    shoushufei+=item.heJi
                }else if(item.shouFeiLeiXingMingCheng=="化验费"){
                    huayanfei+=item.heJi
                }else if(item.shouFeiLeiXingMingCheng=="输血费"){
                    shuxuefei+=item.heJi
                }else if(item.shouFeiLeiXingMingCheng=="输氧费"){
                    shuyangfei+=item.heJi
                }else if(item.shouFeiLeiXingMingCheng=="床位费"){
                    chuangweifei+=item.heJi
                }else if(item.shouFeiLeiXingMingCheng=="接生费"){
                    jieshengfei+=item.heJi
                }else if(item.shouFeiLeiXingMingCheng=="其他"){
                    qita+=item.heJi
                }
            })

            var myChart = echarts.init(document.getElementById('MonthlyStatistics'));

        var option = {
            title: {
                text: '住院部总收入',
                subtext:'按收费类型分'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: ['西药', '中药', '检查', '治疗', '放射', '手术', '化验', '输血', '输氧', '床位', '接生', '其他']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [{
                data:[xiyaofei,zhongyaofei,jianchafei,zhiliaofei,fangshefei,shoushufei,huayanfei,shuxuefei,shuyangfei,chuangweifei,jieshengfei,qita],
                type: 'bar'
            }]
        };

        myChart.setOption(option);
            
        })
        .catch(err=>{
            console.log(err)
        })
    }


    useEffect(() => {
        getDataMonthlyStatistics()
    })


    return (
        <div>
            <Breadcrumb style={{ marginBottom: 24 }}>
                <Breadcrumb.Item>在院计费</Breadcrumb.Item>
                <Breadcrumb.Item>住院部收入</Breadcrumb.Item>
            </Breadcrumb>
            <div className="site-layout-background" style={{ padding: 24, margin: 12, minHeight: 600, clear: "both" }} id="MonthlyStatistics"></div>
        </div>
    );
}

export default ZhuYuanBuShouRu;
